<template>
  <div class="container">
    <div class="common-tab-box">
      <div v-for="(item, index) in tabs" :key="index" :class="{ active: active === index }" @click="active = index">
        {{ item }}
      </div>
    </div>

    <div class="row2">
      <img src="./imgs/l-2.png" alt="" />
      <span>政策文件</span>
      <countTo :startVal="0" :endVal="Number(activeVal)" :duration="1200" separator=""></countTo>
      <span>条</span>
    </div>

    <div class="chart" ref="chart">
      <div class="bg"></div>
      <div class="list">
        <div v-for="(item, index) in list" :key="index">
          <div :style="{ background: color[index] }"></div>
          <div>{{ item.name }}</div>
          <div>{{ item.percent }}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import countTo from 'vue-count-to'
import { getAction } from '@/api/manage'
export default {
  name: 'lRow1',
  components: { countTo },
  data() {
    return {
      tabs: ['政策汇', '办事汇', '诉求汇', '活动汇'],
      active: 0,
      echart: null,
      list: [],
      activeVal: 0,
      color: ['#79D9F9', '#FF91C2', '#52F8DE', '#F4BB5E', '#60A3FB', '#f7f814', '#FD4DFF']
    }
  },
  watch: {
    active(val) {
      this.getData1(this.tabs[val])
      this.getData2(this.tabs[val])
    }
  },
  created(val) {
    this.getData1()
  },
  mounted() {
    this.initChart(this.list)
    this.getData2()
  },
  methods: {
    async getData1(type = '政策汇') {
      const res = await getAction('/topic/data/listAllBySql/dy_dp_cycx_ysh_gk', {
        count_type: type,
        data_type: '总计'
      })
      if (res.result.length > 0) {
        this.activeVal = res.result[0].field_value
      } else {
        this.activeVal = 0
      }
    },
    async getData2(type = '政策汇') {
      this.list = []
      const res = await getAction('/topic/data/listAllBySql/dy_dp_cycx_ysh_gk', {
        count_type: type,
        data_type: '分项'
      })
      if (res.result.length > 0) {
        let sum = 0
        res.result.map((v) => {
          sum += Number(v.field_value)
        })
        res.result.map((v) => {
          this.list.push({
            name: v.field_name,
            value: v.field_value,
            percent: ((v.field_value / sum) * 100).toFixed(2)
          })
        })
      } else {
        this.list = [
          { value: 18.0, name: '国家级文件', percent: 18.0 },
          { value: 18.21, name: '省级文件', percent: 18.21 },
          { value: 25.07, name: '市级文件', percent: 25.07 },
          { value: 38.26, name: '县区级文件', percent: 38.26 }
        ]
      }
      this.initChart(this.list)
    },
    initChart(data) {
      console.log(data)
      this.echart = echarts.init(this.$refs.chart, null, {
        renderer: 'svg'
      })
      const option = {
        tooltip: {
          trigger: 'item',
          confine: true,
          textStyle: {
            fontSize: 20
          },
          extraCssText: 'width:260px',
          valueFormatter: (value) => `${value}`
        },
        grid: {
          top: '10%'
        },
        color: this.color,
        series: [
          {
            type: 'pie',
            radius: ['66%', '90%'],
            center: ['25%', '50%'],
            itemStyle: {
              borderColor: 'rgba(0, 15, 47, 0.56)',
              borderWidth: 3
            },
            label: {
              show: false
            },
            data
          }
        ]
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .row2 {
    width: 355px;
    height: 37px;
    margin: 15px auto;
    display: flex;
    align-items: center;
    background: url('./imgs/l-3.png') no-repeat center center / 100% 100%;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    padding-left: 20px;
    padding-bottom: 20px;
    img {
      width: 61px;
      height: 54px;
    }
    & > span:nth-child(2) {
      margin: 0 60px 0 20px;
    }
    & > span:nth-child(3) {
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #19fdf5;
    }
    & > span:nth-child(4) {
      font-size: 14px;
      margin: 3px 0 0 2px;
    }
  }
  .chart {
    height: 150px;
    position: relative;
    &::after {
      content: '';
      border: 1px solid #4c7fc7;
      border-radius: 50%;
      width: 140px;
      height: 140px;
      position: absolute;
      top: 3.5%;
      left: 8.6%;
    }
    &::before {
      content: '';
      background: url('./imgs/l-8.png') no-repeat center center / 100% 100%;
      width: 90px;
      height: 90px;
      position: absolute;
      top: 20%;
      left: 14.5%;
      animation: rotate 10s linear infinite;
    }
    & > .bg {
      position: absolute;
      top: 42%;
      left: 22%;
      width: 29px;
      height: 23px;
      background: url('./imgs/l-10.png') no-repeat center center / 100% 100%;
    }
    & > .list {
      position: absolute;
      top: 50%;
      right: 5%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      transform: translateY(-50%);
      font-family: MicrosoftYaHei;
      font-weight: bold;
      font-size: 18px;
      color: #ffffff;
      & > div {
        display: flex;
        align-items: center;
        & > div:nth-child(1) {
          width: 4px;
          height: 16px;
          display: inline-block;
          border-radius: 2px 2px 2px 2px;
          margin-right: 10px;
        }
        & > div:nth-child(2) {
          width: 100px;
          font-size: 16px;
          font-weight: 400;
        }
        & > div:nth-child(3) {
          width: 104px;
          height: 27px;
          background: hsla(215, 61%, 29%, 0.5);
          border-radius: 6px 6px 6px 6px;
          text-align: center;
        }
      }
    }
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
}
</style>
